<!DOCTYPE html>
<html lang="en" xmlns:jsp="http://java.sun.com/JSP/Page">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./lodop/jquery.js"></script>
    <script type="text/javascript" src="./lodop/jquery.PrintArea.js"></script>
    <script type="text/javascript" src="./lodop/LodopFuncs.js"></script>
    <script type="text/javascript" src="./lodop/myAlert.js"></script>
    <script type="text/javascript" src="./lodop/myPrintKit.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <style>
        table td,tr{
            border: none;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            运单号:
        </td>
        <td><input placeholder="waybillNumber" id = "waybillNumber" value="5216560351"/></td>
        <td>
            发货人电话:
        </td>
        <td><input placeholder="shipperTel" id = "shipperTel"/></td>
        <td>
            发货人地址:
        </td>
        <td><input placeholder="saddress" id = "saddress" value="上海-上海市-青浦区-徐泾镇,明珠1018 "/></td>
        <td>
            发货人手机:
        </td>
        <td><input placeholder="shipperPhone" id = "shipperPhone" value="15896315389"/></td>
        <td>
            发货人姓名:
        </td>
        <td><input placeholder="shipperName" id = "shipperName" value="NVAS异地调货主客户"/></td>
    </tr>
    <tr>
        <td>
            收货人手机:
        </td>
        <td><input placeholder="conPhone" id = "conPhone" value="158****5389"/></td>
        <td>
            收货人电话:
        </td>
        <td><input placeholder="conTel" id = "conTel" value="183****5167"/></td>
        <td>
            收货人姓名:
        </td>
        <td><input placeholder="conName" id = "conName" value="王某"/></td>
        <td>
            收货人公司:
        </td>
        <td><input placeholder="conCompany" id = "conCompany"/></td>
        <td>
            到达地址:
        </td>
        <td><input placeholder="caddress" id = "caddress" value="上海-上海市-青浦区-徐泾镇  明珠路33号"/></td>

    </tr>
    <tr>
        <td>
            货物名称:
        </td>
        <td><input placeholder="cargoName" id = "cargoName1" value="12345"/></td>

        <td>
            总件数:
        </td>
        <td><input placeholder="cargoCount" id = "cargoCount" value="1"/></td>
        <td>
            货物包装:
        </td>
        <td><input placeholder="cargoPack" id = "cargoPack" value="纸盒"/></td>
        <td>
            备注:
        </td>
        <td><input placeholder="transNote" id = "transNote1"/></td>
        <td>
            大头笔信息简码:
        </td>
        <td><input placeholder="markerPen" id = "markerPen1" value="上海上海市"/></td>
    </tr>
    <tr>
        <td>
            代收货款:
        </td>
        <td><input placeholder="refundPayment" id = "refundPayment" value="0"/></td>
        <td>
            付款方式:
        </td>
        <td><input placeholder="payType" id = "payType" value="月结"/></td>
        <td>
            运输性质:
        </td>
        <td><input placeholder="transType" id = "transType" value="精准卡航(新)"/></td>
        <td>
            提货方式:
        </td>
        <td><input placeholder="receiveMethod" id = "receiveMethod" value="自提"/></td>
        <td>
            保价声名:
        </td>
        <td><input placeholder="insuranceMoney" id = "insuranceMoney" value="0"/></td>
    </tr>
    <tr>
        <td>
            签收单:
        </td>
        <td><input placeholder="signSheet" id = "signSheet" value="无需返单"/></td>
        <td>
            签收单返单要求:
        </td>
        <td><input placeholder="returnRequirement" id = "returnRequirement" value="签收单原件返回"/></td>
        <td>
            客户订单号:
        </td>
        <td><input placeholder="custOrderLine" id = "custOrderLine"/></td>
        <td>
            流水号:
        </td>
        <td><input placeholder="printSerialNos" id = "printSerialNos" value="0001"/></td>
        <td>
            到达网点 :
        </td>
        <td><input placeholder="destination" id = "arrivedOrgSimpleName" value="上海派送部"/></td>
    </tr>
    <tr>
        <td>
            到达行政区:
        </td>
        <td><input placeholder="destination" id = "destination" value="上海派送部"/></td>
    </tr>
</table>
<button onclick="printTest()">打印测试</button>
<a href="./instructions.html">开发步骤</a>
<div id="lodopTips"></div>
<div id="printContext">
    <style>p{margin: 0} .background-black{background-color: #000}</style>
    <style>body {
        margin:0px;
        background-image:none;
        position:static;
        left:auto;
        width:288px;
        margin-left:0;
        margin-right:0;
        text-align:left;
    }
    #base {
        position:absolute;
        z-index:0;
    }
    #u0_img {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:289px;
        height:2px;
    }
    #u0 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:83px;
        width:288px;
        height:1px;
    }
    #u0_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        visibility:hidden;
        word-wrap:break-word;
    }
    #u1_img {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:289px;
        height:2px;
    }
    #u1 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:164px;
        width:288px;
        height:1px;
    }
    #u1_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        visibility:hidden;
        word-wrap:break-word;
    }
    #u2_img {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:289px;
        height:2px;
    }
    #u2 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:240px;
        width:288px;
        height:1px;
    }
    #u2_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        visibility:hidden;
        word-wrap:break-word;
    }
    #u3_img {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:289px;
        height:2px;
    }
    #u3 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:303px;
        width:288px;
        height:1px;
    }
    #u3_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        visibility:hidden;
        word-wrap:break-word;
    }
    #u4_img {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:289px;
        height:2px;
    }
    #u4 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:45px;
        width:288px;
        height:1px;
    }
    #u4_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        visibility:hidden;
        word-wrap:break-word;
    }
    #u5_img {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:289px;
        height:2px;
    }
    #u5 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:137px;
        width:288px;
        height:1px;
    }
    #u5_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        visibility:hidden;
        word-wrap:break-word;
    }
    #u6_img {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:289px;
        height:2px;
    }
    #u6 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:340px;
        width:288px;
        height:1px;
    }
    #u6_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        visibility:hidden;
        word-wrap:break-word;
    }
    #u7_img {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:289px;
        height:2px;
    }
    #u7 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:391px;
        width:288px;
        height:1px;
    }
    #u7_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        visibility:hidden;
        word-wrap:break-word;
    }
    #u8_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:91px;
        height:22px;
        background:inherit;
        background-color:rgba(0, 0, 0, 1);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:18px;
        color:#FFFFFF;
        text-align:center;
        line-height:20px;
    }
    #u8 {
        border-width:0px;
        position:absolute;
        left:120px;
        top:0px;
        width:91px;
        height:22px;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:18px;
        color:#FFFFFF;
        text-align:center;
        line-height:20px;
    }
    #u8_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:91px;
        word-wrap:break-word;
    }
    #u9_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:91px;
        height:22px;
        background:inherit;
        background-color:rgba(0, 0, 0, 1);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:18px;
        color:#FFFFFF;
        text-align:center;
        line-height:20px;
    }
    #u9 {
        border-width:0px;
        position:absolute;
        left:120px;
        top:23px;
        width:91px;
        height:22px;
        font-size:18px;
        color:#FFFFFF;
        text-align:center;
        line-height:20px;
    }
    #u9_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:1px;
        width:91px;
        word-wrap:break-word;
    }
    #u10_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:75px;
        height:39px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        text-align:center;
        line-height:16px;
    }
    #u10 {
        border-width:0px;
        position:absolute;
        left:213px;
        top:0px;
        width:75px;
        height:39px;
        text-align:center;
        line-height:16px;
    }
    #u10_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:12px;
        width:75px;
        word-wrap:break-word;
    }
    #u11_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:75px;
        height:45px;
        background:inherit;
        background-color:rgba(0, 0, 0, 1);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:17px;
        color:#FFFFFF;
        text-align:center;
        line-height:16px;
    }
    #u11 {
        border-width:0px;
        position:absolute;
        left:212px;
        top:1px;
        width:75px;
        height:45px;
        font-size:17px;
        color:#FFFFFF;
        text-align:center;
        line-height:16px;
    }
    #u11_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:6px;
        width:75px;
        word-wrap:break-word;
    }
    #u12_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:225px;
        height:20px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:16px;
        line-height:20px;
    }
    #u12 {
        border-width:0px;
        position:absolute;
        left:63px;
        top:88px;
        width:225px;
        height:20px;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:16px;
        line-height:20px;
    }
    #u12_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:225px;
        word-wrap:break-word;
    }
    #u13_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:81px;
        height:20px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:16px;
        text-align:center;
        line-height:20px;
    }
    #u13 {
        border-width:0px;
        position:absolute;
        left:207px;
        top:141px;
        width:81px;
        height:20px;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:16px;
        text-align:center;
        line-height:20px;
    }
    #u13_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:81px;
        word-wrap:break-word;
    }
    #u14_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:35px;
        height:40px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'黑体';
        font-weight:400;
        font-style:normal;
        text-align:center;
    }
    #u14 {
        border-width:0px;
        position:absolute;
        left:13px;
        top:250px;
        width:35px;
        height:40px;
        font-family:'黑体';
        font-weight:400;
        font-style:normal;
        text-align:center;
    }
    #u14_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:12px;
        width:35px;
        word-wrap:break-word;
    }
    #u15_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:232px;
        height:12px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:10px;
        line-height:12px;
    }
    #u15 {
        border-width:0px;
        position:absolute;
        left:56px;
        top:244px;
        width:232px;
        height:12px;
        font-size:10px;
        line-height:12px;
    }
    #u15_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:232px;
        word-wrap:break-word;
    }
    #u16_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:232px;
        height:12px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:10px;
        line-height:12px;
    }
    #u16 {
        border-width:0px;
        position:absolute;
        left:56px;
        top:258px;
        width:232px;
        height:12px;
        font-size:10px;
        line-height:12px;
    }
    #u16_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:232px;
        word-wrap:break-word;
    }
    #u17_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:232px;
        height:32px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:10px;
        line-height:12px;
    }
    #u17 {
        border-width:0px;
        position:absolute;
        left:56px;
        top:271px;
        width:232px;
        height:32px;
        font-size:10px;
        line-height:12px;
    }
    #u17_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:232px;
        word-wrap:break-word;
    }
    #u18_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:204px;
        height:36px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:10px;
        line-height:12px;
    }
    #u18 {
        border-width:0px;
        position:absolute;
        left:84px;
        top:304px;
        width:204px;
        height:36px;
        font-size:10px;
        line-height:12px;
    }
    #u18_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:204px;
        word-wrap:break-word;
    }
    #u19_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:189px;
        height:16px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        text-align:center;
        line-height:14px;
    }
    #u19 {
        border-width:0px;
        position:absolute;
        left:45px;
        top:222px;
        width:189px;
        height:16px;
        text-align:center;
        line-height:14px;
    }
    #u19_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:189px;
        word-wrap:break-word;
    }
    #u20_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:245px;
        height:51px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'Arial Normal', 'Arial';
        font-weight:400;
        font-style:normal;
        font-size:12px;
        text-align:center;
        line-height:36px;
    }
    #u20 {
        border-width:0px;
        position:absolute;
        left:21px;
        top:169px;
        width:245px;
        height:51px;
        font-family:'Arial Normal', 'Arial';
        font-weight:400;
        font-style:normal;
        font-size:12px;
        text-align:center;
        line-height:36px;
    }
    #u20_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:245px;
        word-wrap:break-word;
    }
    #u21_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:271px;
        height:27px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:10px;
        line-height:13px;
    }
    #u21 {
        border-width:0px;
        position:absolute;
        left:5px;
        top:342px;
        width:271px;
        height:27px;
        font-size:10px;
        line-height:13px;
    }
    #u21_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:271px;
        word-wrap:break-word;
    }
    #u22_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:271px;
        height:25px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:10px;
        line-height:13px;
    }
    #u22 {
        border-width:0px;
        position:absolute;
        left:5px;
        top:366px;
        width:271px;
        height:25px;
        font-size:10px;
        line-height:13px;
    }
    #u22_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:271px;
        word-wrap:break-word;
    }
    #u23_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:51px;
        height:16px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:12px;
        text-align:right;
        line-height:16px;
    }
    #u23 {
        border-width:0px;
        position:absolute;
        left:234px;
        top:222px;
        width:51px;
        height:16px;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:12px;
        text-align:right;
        line-height:16px;
    }
    #u23_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:51px;
        word-wrap:break-word;
    }
    #u24_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:225px;
        height:20px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:16px;
        line-height:20px;
    }
    #u24 {
        border-width:0px;
        position:absolute;
        left:63px;
        top:112px;
        width:225px;
        height:20px;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:16px;
        line-height:20px;
    }
    #u24_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:225px;
        word-wrap:break-word;
    }
    #u25_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:54px;
        height:20px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:16px;
        line-height:20px;
    }
    #u25 {
        border-width:0px;
        position:absolute;
        left:9px;
        top:101px;
        width:54px;
        height:20px;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:16px;
        line-height:20px;
    }
    #u25_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:54px;
        word-wrap:break-word;
    }
    #u26_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:202px;
        height:20px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        text-align:center;
        line-height:20px;
    }
    #u26 {
        border-width:0px;
        position:absolute;
        left:2px;
        top:141px;
        width:202px;
        height:20px;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        text-align:center;
        line-height:20px;
    }
    #u26_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:202px;
        word-wrap:break-word;
    }
    #u27_img {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:2px;
        height:27px;
    }
    #u27 {
        border-width:0px;
        position:absolute;
        left:206px;
        top:138px;
        width:1px;
        height:26px;
    }
    #u27_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        visibility:hidden;
        word-wrap:break-word;
    }
    #u28_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:75px;
        height:36px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:10px;
        line-height:12px;
    }
    #u28 {
        border-width:0px;
        position:absolute;
        left:5px;
        top:304px;
        width:75px;
        height:36px;
        font-size:10px;
        line-height:12px;
    }
    #u28_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:75px;
        word-wrap:break-word;
    }
    #u29_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:288px;
        height:34px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:24px;
        text-align:center;
        line-height:34px;
    }
    #u29 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:48px;
        width:288px;
        height:34px;
        font-family:'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight:700;
        font-style:normal;
        font-size:24px;
        text-align:center;
        line-height:34px;
    }
    #u29_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:288px;
        word-wrap:break-word;
    }
    #u30_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:288px;
        height:80px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:12px;
        line-height:14px;
    }
    #u30 {
        border-width:0px;
        position:absolute;
        left:0px;
        top:392px;
        width:288px;
        height:80px;
        font-size:12px;
        line-height:14px;
    }
    #u30_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:288px;
        word-wrap:break-word;
    }
    #u31_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:141px;
        height:12px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:10px;
        line-height:12px;
    }
    #u31 {
        border-width:0px;
        position:absolute;
        left:5px;
        top:472px;
        width:141px;
        height:12px;
        font-size:10px;
        line-height:12px;
    }
    #u31_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:141px;
        word-wrap:break-word;
    }
    #u32_div {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:138px;
        height:12px;
        background:inherit;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        border-radius:0px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        font-size:10px;
        text-align:right;
        line-height:12px;
    }
    #u32 {
        border-width:0px;
        position:absolute;
        left:146px;
        top:472px;
        width:138px;
        height:12px;
        font-size:10px;
        text-align:right;
        line-height:12px;
    }
    #u32_text {
        border-width:0px;
        position:absolute;
        left:0px;
        top:0px;
        width:138px;
        word-wrap:break-word;
    }
    </style>
    <div id="base" class="">

        <!-- Unnamed (水平线) -->
        <div id="u0" class="ax_default line background-black"></div>

        <!-- Unnamed (水平线) -->
        <div id="u1" class="ax_default line background-black"></div>

        <!-- Unnamed (水平线) -->
        <div id="u2" class="ax_default line background-black"></div>

        <!-- Unnamed (水平线) -->
        <div id="u3" class="ax_default line background-black"></div>

        <!-- Unnamed (水平线) -->
        <div id="u4" class="ax_default line background-black"></div>

        <!-- Unnamed (水平线) -->
        <div id="u5" class="ax_default line background-black"></div>

        <!-- Unnamed (水平线) -->
        <div id="u6" class="ax_default line background-black"></div>

        <!-- Unnamed (水平线) -->
        <div id="u7" class="ax_default line background-black"></div>

        <!-- If refundPayment>0 EndIf 代:{{refundPayment}} (矩形) -->
        <div id="u8" class="ax_default label" data-show="refundPayment>0">
            <div id="u8_div" class=""></div>
            <div id="u8_text" class="text " data-text="代:{{refundPayment}}"></div>
        </div>

        <!-- {{payType}} (矩形) -->
        <div id="u9" class="ax_default label">
            <div id="u9_div" class=""></div>
            <div id="u9_text" class="text " data-text="{{payType}}"></div>
        </div>

        <!-- If transType!=='精准卡航(新)'&&transType!==精准汽运(新)'&&transType!=='精准重货(新)' EndIf {{transType.slice(0,Math.floor(transType.length/2))}}\n{{transType.slice(Math.floor(transType.length/2))}} (矩形) -->
        <div id="u10" class="ax_default label" data-show="transType!=='精准卡航(新)'&amp;&amp;transType!==精准汽运(新)'&amp;&amp;transType!=='精准重货(新)'">
            <div id="u10_div" class=""></div>
            <div id="u10_text" class="text " data-text="{{transType.slice(0,Math.floor(transType.length/2))}}\n{{transType.slice(Math.floor(transType.length/2))}}"></div>
        </div>

        <!-- If transType==='精准卡航(新)'||transType==='精准汽运(新)'||transType==='精准重货(新)' EndIf {{transType.slice(0,Math.floor(transType.length/2))}}\n{{transType.slice(Math.floor(transType.length/2))}} (矩形) -->
        <div id="u11" class="ax_default label" data-show="transType==='精准卡航(新)'||transType==='精准汽运(新)'||transType==='精准重货(新)'">
            <div id="u11_div" class=""></div>
            <div id="u11_text" class="text " data-text="{{transType.slice(0,Math.floor(transType.length/2))}}\n{{transType.slice(Math.floor(transType.length/2))}}"></div>
        </div>

        <!-- {{arrivedOrgSimpleName}} (矩形) -->
        <div id="u12" class="ax_default label">
            <div id="u12_div" class=""></div>
            <div id="u12_text" class="text " data-text="{{arrivedOrgSimpleName}}"></div>
        </div>

        <!-- {{currentCargoIndex}}/{{cargoCount}} (矩形) -->
        <div id="u13" class="ax_default label">
            <div id="u13_div" class=""></div>
            <div id="u13_text" class="text " data-text="{{currentCargoIndex}}/{{cargoCount}}"></div>
        </div>

        <!-- Type image EndType http://vip.deppon.com/vas-cas-web/img/recipient.png (矩形) -->
        <div id="u14" class="ax_default label" data-type="image" data-offset="250px,13px,35px,40px"><img src="http://vip.deppon.com/vas-cas-web/img/recipient.png" style="width: 100%;height: 100%"></div>

        <!-- {{conName}} {{conCompany}} (矩形) -->
        <div id="u15" class="ax_default label">
            <div id="u15_div" class=""></div>
            <div id="u15_text" class="text " data-text="{{conName}} {{conCompany}}"></div>
        </div>

        <!-- {{conPhone}} {{conTel}} (矩形) -->
        <div id="u16" class="ax_default label">
            <div id="u16_div" class=""></div>
            <div id="u16_text" class="text " data-text="{{conPhone}} {{conTel}}"></div>
        </div>

        <!-- {{caddress}} (矩形) -->
        <div id="u17" class="ax_default label">
            <div id="u17_div" class=""></div>
            <div id="u17_text" class="text " data-text="{{caddress}}"></div>
        </div>

        <!-- {{saddress}} (矩形) -->
        <div id="u18" class="ax_default label">
            <div id="u18_div" class=""></div>
            <div id="u18_text" class="text " data-text="{{saddress}}"></div>
        </div>

        <!-- {{waybillNumber}} (矩形) -->
        <div id="u19" class="ax_default label">
            <div id="u19_div" class=""></div>
            <div id="u19_text" class="text " data-text="{{waybillNumber}}"></div>
        </div>

        <!-- Type barCode EndType {{waybillNumber}} (矩形) -->
        <div id="u20" class="ax_default heading_3" data-type="barCode" data-offset="169px,21px,245px,51px">
            <div id="u20_div" class=""></div>
            <div id="u20_text" class="text " data-text="{{waybillNumber}}"></div>
        </div>

        <!-- 签收单:{{signSheet.replace(/签收单/,'')}} (矩形) -->
        <div id="u21" class="ax_default label">
            <div id="u21_div" class=""></div>
            <div id="u21_text" class="text " data-text="签收单:{{signSheet.replace(/签收单/,'')}}"></div>
        </div>

        <!-- If returnRequirement EndIf 返单要求：{{returnRequirement}} (矩形) -->
        <div id="u22" class="ax_default label" data-show="returnRequirement">
            <div id="u22_div" class=""></div>
            <div id="u22_text" class="text " data-text="返单要求：{{returnRequirement}}"></div>
        </div>

        <!-- 已验视 (矩形) -->
        <div id="u23" class="ax_default label">
            <div id="u23_div" class=""></div>
            <div id="u23_text" class="text " data-text="已验视"></div>
        </div>

        <!-- {{destination}} (矩形) -->
        <div id="u24" class="ax_default label">
            <div id="u24_div" class=""></div>
            <div id="u24_text" class="text " data-text="{{destination}}"></div>
        </div>

        <!-- {{receiveMethod === '自提'?'【自】':(receiveMethod === '送货安装' || receiveMethod === '送货入户')?'【装】':'【送】'}} (矩形) -->
        <div id="u25" class="ax_default label">
            <div id="u25_div" class=""></div>
            <div id="u25_text" class="text " data-text="{{receiveMethod === '自提'?'【自】':(receiveMethod === '送货安装' || receiveMethod === '送货入户')?'【装】':'【送】'}}"></div>
        </div>

        <!-- {{cargoPack}} (矩形) -->
        <div id="u26" class="ax_default label">
            <div id="u26_div" class=""></div>
            <div id="u26_text" class="text " data-text="{{cargoPack}}"></div>
        </div>

        <!-- Unnamed (垂直线) -->
        <div id="u27" class="ax_default line background-black"></div>

        <!-- 寄 {{shipperName.replace(/^((.|\s){3})((.|\s)+)/g,'$1...')}}\n{{shipperPhone}}\n{{shipperTel}} (矩形) -->
        <div id="u28" class="ax_default label">
            <div id="u28_div" class=""></div>
            <div id="u28_text" class="text " data-text="寄 {{shipperName.replace(/^((.|\s){3})((.|\s)+)/g,'$1...')}}\n{{shipperPhone}}\n{{shipperTel}}"></div>
        </div>

        <!-- {{markerPen}} (矩形) -->
        <div id="u29" class="ax_default label">
            <div id="u29_div" class=""></div>
            <div id="u29_text" class="text " data-text="{{markerPen}}"></div>
        </div>

        <!-- 品名：{{cargoName}}\n\n备注：{{transNote}} (矩形) -->
        <div id="u30" class="ax_default label">
            <div id="u30_div" class=""></div>
            <div id="u30_text" class="text " data-text="品名：{{cargoName}}\n\n备注：{{transNote}}"></div>
        </div>

        <!-- 用户订单号：{{custOrderLine}} (矩形) -->
        <div id="u31" class="ax_default label">
            <div id="u31_div" class=""></div>
            <div id="u31_text" class="text " data-text="用户订单号：{{custOrderLine}}"></div>
        </div>

        <!-- {{new Date().toLocaleString()}} 第{{printSerialNos}}单 (矩形) -->
        <div id="u32" class="ax_default label">
            <div id="u32_div" class=""></div>
            <div id="u32_text" class="text " data-text="{{new Date().toLocaleString()}} 第{{printSerialNos}}单"></div>
        </div>
    </div>
</div>
</body>
<script>
    const apps = new Vue({
        el: '#app',
        data: {
            obj: '',
            btn: ''
        }
    })
    window.onload = function () {
        // 在这里编写需要自动执行的代码
        const urlSearchParams = new URLSearchParams(window.location.search);
        const id = urlSearchParams.get('id'); // "Tom"
        // "Tom"
        apps.$data.btn = urlSearchParams.get('btn') || '';
        $.ajax({
            url: "https://customerservice.lixil-tostem.cn/mp-api/wx/oa/queryData?id=" + id,    //请求的url地址
            type: "GET",   //请求方式
            data : {},
            success: function (result) {
                let da = result.data;
                apps.$data.obj = JSON.parse(da.remark)
            },
        });
    }

    function createPDF() {
        var width = $('body').width();
        var height = $('body').height();
        var date = new Date()
        var pdf = new jsPDF('p', 'px', [height/2.67,width/2.6]);
        pdf.internal.scaleFactor = 3;
        var options = {
            useCORS: true,
            pagesplit: true
        };
        $('#but').css('display','none');
        // let child = document.getElementById('but');
        // child.remove()
        //$('.pdf-wrapper')
        pdf.addHTML(document.body, options, function () {
            pdf.save('质保单' + date.toString() + ".pdf");
            $('#but').css('display','block');
        });
    }
</script>
</html>